<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0 px;
        padding: 0 px;

    }

    .box {
        width: 1100px;

        margin: 10px auto;
        border: 1px solid red;
        position: relative;
    }

    .box1>img {
        width: 1100px;
        height: 610px;
        position: absolute;
        top: 0px;
        left: 0px;
        opacity: 0;
        transition: all 0.5s;

    }

    .box1 {
        width: 1100px;
        height: 610px;


    }

    .box1>img:nth-of-type(1) {
        z-index: 1;
        opacity: 1;
    }

    .txt {
        height: 40px;
        background-color: blue;
        color: white;
        z-index: 10;
        width: 100%;
        position: absolute;
        left: 0px;
        bottom: 0px;
        line-height: 40px;
        padding-left: 10px;
        box-sizing: border-box;

    }

    .bottomnav {
        z-index: 999;
        position: absolute;
        width: 120px;
        height: 12px;

        right: 10px;
        bottom: 14px;
    }

    .nav {
        position: absolute;

        top: 50%;
        z-index: 30;
        margin-top: -50px;
        display: none;

    }

    .nav1 {
        left: 0px;
    }

    .nav2 {
        right: 0px;
    }

    .bottomnav>span {
        width: 12px;
        height: 12px;
        background-color: #ccc;
        border-radius: 100%;
        display: block;
        float: left;
        margin-left: 8px;
    }

    .bottomnav>.whitebg {
        background-color: red;
    }
</style>

<body>
    <div class="box" id="box">
        <div class="box1" id="box1">
            <img src=" images/1.jpg  " />
            <img src="images/2.jpg" />
            <img src=" images/3.jpg " />
            <img src=" images/4.jpg  " />
            <img src="images/5.jpg " />
            <div class="txt" id="txt">

            </div>
            <div class="bottomnav" id="bottomnav">
                <span class="whitebg"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

        </div>
        <img id="nav1" src="http://www.gov.cn/govweb/xhtml/2016gov/images/public/index_btn01.png" class="nav nav1" />
        <img id="nav2" src="http://www.gov.cn/govweb/xhtml/2016gov/images/public/index_btn02.png" class="nav nav2" />

    </div>


    <script>
        var txts = ['习近平在北京市调研指导新型冠状病毒肺炎疫情防控工作1',
            '李克强考察中国医科院：早一天发现有效药，这个病毒就不可怕了',
            '习近平在北京市调研指导新型冠状病毒肺炎疫情防控工作3',
            '习近平在北京市调研指导新型冠状病毒肺炎疫情防控工作4',
            '习近平在北京市调研指导新型冠状病毒肺炎疫情防控工作5'];

        var imgs = document.getElementsByTagName("img");
        var spans = document.getElementsByTagName("span");
        var i = 0;
        txt.innerHTML = txts[i];
        function clearClassName() {
            for (var i = 0; i < spans.length; i++) {
                spans[i].className = "";
            }


        }
        //点圆点时
        for (let j = 0; j < spans.length; j++) {
            spans[j].onmousemove = function () {
                if (i == j) {
                    return; //以下不执行
                }
                clearClassName();

                imgs[i].style.opacity = 0;
                imgs[j].style.opacity = 1;
                txt.innerHTML = txts[j];
                spans[j].className = "whitebg";
                i = j;

            }
        }
        //

        box.onmouseover = function () {
            nav1.style.display = "block";
            nav2.style.display = "block";
        }

        box.onmouseout = function () {
            nav1.style.display = "none";
            nav2.style.display = "none";
        }




        function nextPic() {
            clearClassName();
            if (i == 4) {
                imgs[i].style.opacity = 0;
                imgs[0].style.opacity = 1;
                txt.innerHTML = txts[0];
                spans[0].className = "whitebg";
                i = 0;
                return;
            }


            imgs[i].style.opacity = 0;
            imgs[i + 1].style.opacity = 1;
            txt.innerHTML = txts[i + 1];
            spans[i + 1].className = "whitebg";
            i++;
        }
        setInterval(nextPic, 6000);
        nav1.onclick = function () {
            clearClassName();
            if (i == 0) {
                imgs[0].style.opacity = 0;
                imgs[4].style.opacity = 1;
                txt.innerHTML = txts[4];
                spans[4].className = "whitebg";
                i = 4;
                return;
            }


            imgs[i].style.opacity = 0;
            imgs[i - 1].style.opacity = 1;
            txt.innerHTML = txts[i - 1];
            spans[i - 1].className = "whitebg";
            i--;
        }
        nav2.onclick = function () {
            clearClassName();
            if (i == 4) {
                imgs[i].style.opacity = 0;
                imgs[0].style.opacity = 1;
                txt.innerHTML = txts[0];
                spans[0].className = "whitebg";
                i = 0;
                return;
            }


            imgs[i].style.opacity = 0;
            imgs[i + 1].style.opacity = 1;
            txt.innerHTML = txts[i + 1];
            spans[i + 1].className = "whitebg";
            i++;
        }




    </script>







</body>

</html>